<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.mydiv{
			border-bottom: 10px solid red;
			height: 400px;
		}
	</style>
</head>
<body>
<div class="mydiv">1</div>
<div class="mydiv" id="div">2</div>
<div class="mydiv">3</div>
<div class="mydiv">3</div>
<div class="mydiv">4</div>
<div class="mydiv">5</div>
<div class="mydiv">6</div>
<div class="mydiv">7</div>
<div class="mydiv">8</div>
<div class="mydiv">9</div>
<div class="mydiv">10</div>
<div class="mydiv">11</div>
<div class="mydiv">12</div>
<div class="mydiv">13</div>
<div class="mydiv">14</div>
<div class="mydiv">15</div>
<div class="mydiv">16</div>
<div class="mydiv">17</div>
<div class="mydiv">18</div>
<div class="mydiv">19</div>
<div class="mydiv">20</div>
	<script>
	//封装获取滚动条被卷去的距离
	function scroll(){
		return {			
			top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
			left:window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
		}
	}
	//调用滚动条被卷去距离
	window.onscroll = function(){
		console.log('浏览器被卷去的高度:'+scroll().top)
		console.log('浏览器被卷去的宽度:'+scroll().left)
	}	
	//封装获取浏览器可视窗口区域
	function client(){
		return {
			width:window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0,
			height:window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight|| 0
		}
	}
    //调用浏览器可视窗口的区域
    window.onresize = function () {
		console.log('浏览器可视窗口的宽度:'+client().width);
		console.log('浏览器可视窗口的高度:'+client().height);
    };
	//封装获取盒子最终显示的属性
	function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }
    //调用封装的getStyle方法，获取宽度
	console.log(getStyle(div,'height'))
	</script>
</body>
</html>